<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>地震局培训平台</title>
	<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
	<link rel="stylesheet" href="style/main.css" />
	<link rel="stylesheet" href="style/details_train.css" />
</head>

<body>
	<div id="info">
		<div class="info">
			<div class="newsbox">
				<!--消息滚动-->
				<div class="news nowrap">消息：欢迎加入地震应急志愿者培训平台，您是第123456位访问用户。</div>
			</div>
			<div class="infobox">
				<div class="name nowrap">zhangming</div>
				<div class="info_id nowrap">N.8784547</div>
				<div class="sign_out">退出</div>
			</div>
			<div class="leave_m">互动留言</div>
		</div>
	</div>
	<div id="show">
		<nav id="nav">
			<div class="top">
				<div class="logo"></div>
				<div class="seachbox">
					<input type="text" id="search" value="在线课堂搜索" />
					<div class="weibo codeIcon">
						<div class="first">
							<img src="image/weiboCode.png" />
						</div>
					</div>
					<div class="weixin codeIcon">
						<div class="first">
							<img src="image/weixinCode.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="border">
				<ul class="nav">
					<li data-url="index">首页</li>
					<li data-url="news">新闻资讯</li>
					<!--<li data-url="story">志愿故事</li>-->
					<li class="team">志愿品牌
						<div class="first">
							<div data-url="story">志愿故事</div>
							<div data-url="team">志愿团体</div>
							<div data-url="star">志愿之星</div>
						</div>
					</li>
					<!--<li data-url="project">志愿项目</li>
						<li data-url="star">志愿之星</li>-->
					<li class="in" data-url="train">培训平台</li>
					<li data-url="policy">志愿政策</li>
				</ul>
			</div>
		</nav>

		<div id="position">
			您所在的位置：首页>培训平台>正文
		</div>

		<div id="content">
			<div class="title">本周讲堂：
				<span class='titles'></span>
			</div>
			<!-- <div id="videobox">
					<div class="title">地震知识课堂(第10课)</div>
					<div class="videobox">
						<video id="video" src=""></video>
						<div class="btnbox">
							<div class="time">25:06</div>
							<div class="progress">
								<div class="progress-bar"></div>
							</div>
							<div class="volumn"></div>
							<div class="download"></div>
							<div class="full"></div>
						</div>
					</div>
					<div class="chatroom">
						<div class="roomname">咨询聊天室</div>
						<div class="sendbox">
							<input class="sendinfo" />
							<div class="sendbtn">发送</div>
						</div>
						<div class="messagebox">
							<div class="infobox">
								<div class="head"></div>
								<div class="box">
									<div class="name">管理员</div>
									<div class="text">这是录播大家可以循环观看</div>
								</div>
							</div>
							<div class="infobox in">
								<div class="box">
									
									<div class="text">这是录播大家可以循环观看</div>
								</div>
								<div class="head"></div>
							</div>
						</div>
					</div>
				</div> -->
			<video controls="controls" class="title001">
			</video>
			<div class="share">分享到：
				<div class="qq"></div>
				<div class="weibo2"></div>
				<div class="weixin2"></div>
			</div>
			<div class="c_bottom">
				<div class="box">
					<div class="title2">本周讲堂：
						<span class='titles'></span>
					</div>
					<p class="text">本专题的目的</p>
					<p class="text">一、主要是介绍服务过程中可能会遇到的心理问题</p>
					<p class="text">二、学习心理自护知识</p>
				</div>
				<div class="box">
					<div class="title2" id="realname"></div>
					<p class="text" id="description"></p>
					<p class="text" id="teacherDesc"></p>
					<!-- <p class="text">第二讲：服务过程中志愿者常有的心理问题</p>
					<p class="text">第二讲：服务过程中志愿者常有的心理问题</p> -->
				</div>
				<div class="box">
					<div class="title2">课件资料</div>
					<div class="download"></div>
					<p class="text">地震开始发生的地点称为震源，震源正上方的地面称为震中。破坏性地震的地面振动最烈处称为极震区，极震区往往也就是震中所在的地区。 [2] 地震常常造成严重人员伤亡，能引起火灾、水灾、有毒气体泄漏、细菌及放射性物质扩散，还可能造成海啸、滑坡、崩塌、地裂缝等次生灾害。的地震大约有一两次。人们感觉不到的地震，必须用地震仪才能记录下来；不同类型的地震仪能记录不同强度、不同远近的地震。世界上运转着数以千计的各种地震仪器日夜监测着地震的动向。</p>
				</div>
			</div>
		</div>
		<div id="recommend">
			<div class="title">推荐</div>
			<div class="box">
				<div class="img"></div>
				<p class="text">02应急技能之正确的地震逃生方法</p>
				<p class="text">国人从小到大，在防震演习中，老师总是叫学生躲在课桌国人从小到大，在防震演习中，老师总是叫学生躲在课桌下，下，得知</p>
			</div>
			<div class="box">
				<div class="img"></div>
				<p class="text">02应急技能之正确的地震逃生方法</p>
				<p class="text">国人从小到大，在防震演习中，老师总是叫学生躲在课桌国人从小到大，在防震演习中，老师总是叫学生躲在课桌下，下，得知</p>
			</div>
			<div class="box">
				<div class="img"></div>
				<p class="text">02应急技能之正确的地震逃生方法</p>
				<p class="text">国人从小到大，在防震演习中，老师总是叫学生躲在课桌国人从小到大，在防震演习中，老师总是叫学生躲在课桌下，下，得知</p>
			</div>
			<div class="box">
				<div class="img"></div>
				<p class="text">02应急技能之正确的地震逃生方法</p>
				<p class="text">国人从小到大，在防震演习中，老师总是叫学生躲在课桌国人从小到大，在防震演习中，老师总是叫学生躲在课桌下，下，得知</p>
			</div>
		</div>

		<div id="bottom">
			<ul class="border">
				<li>相关协作单位：</li>
				<li>中国红十字会</li>
				<li>中科院心理所</li>
				<li>中国地震信息网</li>
				<li>中国地震科普网</li>
				<li>北京市地震局科普网 </li>
				<li>科普网</li>
			</ul>
			<div class="bottom">
				<ul class="one">
					<li>设为首页</li>
					<li>交换链接</li>
					<li>关于我们</li>
					<li>联系我们</li>
					<li>常见问题</li>
					<li>心理教室</li>
					<li>党团建设</li>
				</ul>
				<ul class="two">
					<li>主办：北京市地震局</li>
					<li>版权所有 京ICP备08988239</li>
					<li>技术支持：中宣助力传媒</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="script/jquery.min.js"></script>
		<script type="text/javascript" src="script/ishoock.tools.js"></script>
		<script type="text/javascript" src="script/main.js"></script>
		<script>
			var video = $("#video")[0];
			$(function () {
				// $("#video").on("click", function() {
				// 	video.play();
				// 	console.log(video.videoHeight);
				// });
				// video.addEventListener("timeupdate", function() {

				// 	var time =Math.floor(video.currentTime);
				// 	time =getTime(time);
				// 	$(".videobox .btnbox .time").html(time);
				// });

				var loc = window.location.href;
				var n1 = loc.length;//地址的总长度
				var n2 = loc.indexOf("=");//取得=号的位置
				var id = decodeURI(loc.substr(n2 + 1, n1 - n2));//从=号后面的内容
				var CDN = "http://101.201.113.151:9000/";
				console.log(id);//

				$.ajax({
					type: "GET",
					url: "http://101.201.113.151:9230/traning/getListofTraningInfo?type=0&pageSize=12&page=1",//访问的链接
					dataType: "json",  //数据格式设置为jsonp
					// jsonp:"callback",
					async: true,
					success: function (data) {  //成功的回调函数
						for (var i = 0; i < data.result.length; i++) {
							console.log(id == data.result[i].id);
							if (id == data.result[i].id) {
								var ion = data.result[i];
								console.log(ion.title);
								var imageUrl = ion.videoUrl;
								if (imageUrl != null) {
									var imageUrls = imageUrl.substr(42);
								}
								$("video").attr("src", CDN + imageUrls);
								$(".titles").text(ion.title);
								$("#description").text(ion.description);
								$("#realname").text(ion.realname);
								$("#teacherDesc").text(ion.teacherDesc);
								console.log(CDN + imageUrls)
								// $("#realname").val("100");
							}
						}


					},
					error: function (e) {
						// alert("111");
					}
				});
			})

			function getTime(time) {
				var minute = parseInt(time / 60);
				var second = time % 60;
				return minute + ":" + second;
			}
		</script>
</body>

</html>